<!-- 2023/ 06/ 08 CBH37 主页 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="css/root.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />

    <title>Hayai 快、简便、安全的即时通讯平台</title>
</head>
<body>
    <h1 id="main_title">Hayai</h1>
    <h2 id="second_title">快、简便、安全的即时通讯平台</h2>

    <div id="body">
        <div class="create_new_group_buttom">创建新群</div>
        <div class="join_group_buttom">加入群聊</div>
    </div>
    
    <!-- 遮罩层 -->
    <div class="madal">
        <!-- 创建新群的弹窗 -->
        <div class="create_new_group_madal">
            <div class="madal_high">
                <span class="madal_high_title">创建新群</span>
                <span class="cancel">×</span>
            </div>

            <form class="madal_body">
                <p>群名</p>
                <input type="text" name="group_name" value="群名" class="input_box" />
                
                <p>你的昵称</p>
                <input type="text" name="master_name" value="你的昵称" class="input_box" />

                <input type="submit" value="创建" class="submit_buttom" />
            </form>
        </div>

        <!-- 创建成功的弹窗 -->
        <div class="create_success_madal">
            <p class="id">群ID：</p>
            <p class="id_value"></p>

            <div class="opinion">
                <!-- 复制后淡入`已复制`，1秒后再淡出继续显示COPY -->
                <div class="opinion_copy_buttom">COPY</div>
                <div class="opinion_ok_buttom">OK</div>
            </div>
        </div>

        <!-- 进入群聊的弹窗 -->
        <div class="join_group_madal">
            <div class="madal_high">
                <span>进入群聊</span>
                <div class="cancel">×</div>
            </div>

            <form class="madal_body">
                <p>群ID：</p>
                <input type="text" name="group_id" value="群ID" class="input_box" />

                <p>你的昵称</p>
                <input type="text" name="member_name" value="你的昵称" class="input_box" />

                <input type="submit" value="确定" class="submit_buttom" />
            </form>
        </div>

        <!-- 创建或进入失败的弹窗 -->
        <div class="fail_modal">
            <p class="fail_content"></p>
            <div class="try_again_buttom">再试一次</div>
        </div>
    </div>
</body>
</html>